<template>
    <div class="overlay" v-show="overlay.isShow" @click="onClickOverlay">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { useOverlayStore } from '@/Stores/overlay';
const overlay = useOverlayStore();

const onClickOverlay = () => {
    // console.log('overlay.closeOnClickOverlay: ', overlay.closeOnClickOverlay);
    if (overlay.closeOnClickOverlay) {
        overlay.setShow(false);
    }
}
</script>

<style lang="scss" scoped>
.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    overflow: auto;
}
</style>